<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #number{display: flex;width: 90px;border: solid 1px black;}
    #number span{flex: 1;width: 30px;height: 30px;text-align: center;line-height: 30px;cursor: pointer;}
    #number input{flex: 1;width: 30px;height: 30px;border: none;padding: 0;margin: 0;border-left: solid 1px black;border-right: solid 1px black;text-align: center;}
  </style>
</head>
<body>

  <input type="number" step="2" min="10" max="30" value="14">

  <div id="number">
    <span id="less">-</span>
    <input type="text" value="1" id="txt">
    <span id="more">+</span>
  </div>
  
</body>
<script>

  // 选择器
  var less = document.getElementById("less");
  var more = document.getElementById("more");
  var txt = document.getElementById("txt");

  // 获取输入框的初始内容
  var n = txt.value - 0;

  // 当输入框被重新输入时，获取最新内容
  txt.oninput = function(){
    n = txt.value - 0;
  }
  // 点击-按钮
  less.onclick = function(){
    txt.value = --n;
  }
  // 点击+按钮
  more.onclick = function(){
    txt.value = ++n;
  }
  
</script>
</html>